<template style="height: 100%;">
  <!-- lx 2023年3月13日 10点01分 -->
    <!-- 菜单管理 -->
    <div id="menuList">
      <div ref="tableDom">
        <el-row>
        <el-card class="box-card" >
          <el-row>
            <!-- 模糊查询 -->
            <el-col :span="3">
              <el-input
                  style="float:left"
                  v-model="menuName"
                  placeholder="请输入菜单名称"></el-input>
            </el-col>
            <!-- 查询按钮 -->
            <el-button
                  style="color: #d7000f; border: 1px solid #d7000f;float:left;margin-left: 15px;"
                  @click="queryMenuByMenuName"
                  plain
                  >查询</el-button>
            <!-- 新增按钮 -->
            <el-col :span="2">
            <el-button
              @click="addMenu"
              style="background-color: #d7000f; color: #fff;float:left;margin-left: 150px;"
              >新增</el-button>
          </el-col>
            <!-- <el-col :span="2">
              <el-button style="background-color: #D7000F;border: none;float:left" type="primary" @click="addMenu">新增</el-button>
            </el-col> -->
          </el-row>
          <!-- 菜单数据展示 -->
            <el-table
              :data="data"
              height="600"
              style="width: 100%; margin-top: 10px;"
              row-key="id"
              border
              default-expand-all
              :tree-props="{children: 'childs', hasChildren: 'hasChildren'}">
            <el-table-column prop="menuName" label="菜单名称">
              <template slot-scope="scope">
                <e-icon :icon-name="scope.row.icon"/>
                {{scope.row.menuName}}
              </template>
            </el-table-column>
            <el-table-column prop="menuAddress" label="菜单地址">
            </el-table-column>
            <el-table-column prop="menuRemarks" label="备注">
            </el-table-column>
            <el-table-column prop="menuCreateTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="menuUpdateTime" label="更新时间">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button @click="menuDetail(scope.row)" size="mini">查看</el-button>
                <el-button
                @click="menuEdit(scope.row)"
                style="background-color: #534947; color: #fff"
                size="mini">编辑</el-button>
                <el-button
                @click="menuDelete(scope.row.id)"
                style="background-color: #d7000f; color: #fff"
                size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-row>
      <!-- 菜单数据新增功能 -->
      <el-dialog title="新增商品" :visible.sync="dialogFormVisible">
        <el-form :model="menuForm" ref="menuForm" :rules="rules">
          <el-form-item label="图标" :label-width="formLabelWidth">
            <div  class="div_icon">
              <e-icon-picker v-model="menuForm.icon"/>
            </div>
          </el-form-item>
          <!-- 父级窗口选项 -->
          <el-dialog title="父级" :visible.sync="parentTheeDialogFormVisible" width="30%" append-to-body>
            <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all
              :filter-node-method="filterNode" @node-click="callTree" ref="tree">
            </el-tree>
          </el-dialog>
          <el-form-item label="父级名称" :label-width="formLabelWidth">
            <el-input v-model="menuForm.menuParentName" :disabled="true" style="width: 90%;" show-word-limit clearable placeholder="请选择"></el-input>
            <el-button type="primary" @click="parentTheeDialogFormVisible = true" plain style="background: #d7000f;border-color:#d7000f;color:white">上级</el-button>
          </el-form-item>
          <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="menuName">
            <el-input v-model="menuForm.menuName" autocomplete="off" show-word-limit clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="菜单地址" :label-width="formLabelWidth" prop="menuAddress">
            <el-input v-model="menuForm.menuAddress" autocomplete="off" show-word-limit clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="menuForm.menuRemarks" autocomplete="off" show-word-limit clearable placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveMenu('menuForm')" style="background: #C90003;border-color:#C90003;">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 菜单数据查看功能 -->
      <el-dialog title="商品详情" :visible.sync="dialogFormVisibleDetail">
        <el-form :model="menuFormDetail">
          <el-form-item label="父级名称" :label-width="formLabelWidth">
            <el-input v-model="menuFormDetail.menuParentName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="部门名称" :label-width="formLabelWidth">
            <el-input v-model="menuFormDetail.menuName" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="菜单地址" :label-width="formLabelWidth">
            <el-input v-model="menuFormDetail.menuAddress" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="menuFormDetail.menuRemarks" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleDetail = false">关 闭</el-button>
        </div>
      </el-dialog>
      <!-- 菜单数据修改 -->
      <el-dialog title="编辑商品" :visible.sync="dialogFormVisibleEdit">
        <el-form :model="menuFormEdit" ref="menuFormEdit" :rules="rules">
          <el-form-item label="图标" :label-width="formLabelWidth">
            <div style="width: 200px">
            <e-icon-picker v-model="menuFormEdit.icon"/>
           </div>
          </el-form-item>
          <!-- 父级窗口选项 -->
          <el-dialog title="父级" :visible.sync="parentTheeDialogFormVisible" width="30%" append-to-body>
            <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all
              :filter-node-method="filterNode" @node-click="callTree" ref="tree">
            </el-tree>
          </el-dialog>
          <el-form-item label="父级名称" :label-width="formLabelWidth">
            <el-input v-model="menuFormEdit.menuParentName" :disabled="true" style="width: 90%;"></el-input>
            <el-input v-model="menuFormEdit.menuParentId" :disabled="true" style="width: 80%; display:none" show-word-limit clearable placeholder="请选择"></el-input>
            <el-button type="primary" @click="parentTheeDialogFormVisible = true" plain style="background: #d7000f;border-color:#d7000f;color:white">上级</el-button>
          </el-form-item>
          <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="menuName">
            <el-input v-model="menuFormEdit.menuName" autocomplete="off" show-word-limit clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="菜单地址" :label-width="formLabelWidth" prop="menuAddress">
            <el-input v-model="menuFormEdit.menuAddress" autocomplete="off" show-word-limit clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="menuFormEdit.menuRemarks" autocomplete="off" show-word-limit clearable placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
          <el-button type="primary" @click="updateMenu('menuFormEdit')" style="background: #C90003;border-color:#C90003;">确 定</el-button>
        </div>
      </el-dialog>
      </div>
    </div>
</template>

<script>
const axios = require('axios')
export default {
  template: 'menuList',
  data () {
    return {
      data: [],
      // 存放模糊查输入框输入的值
      menuName: '',
      // 存放树对象
      defaultProps: {
        children: 'childs',
        label: 'menuName'
      },
      // 设置宽度
      formLabelWidth: '120px',
      menuForm: { // 新增菜单
        id: 0,
        menuName: '',
        menuParentId: '',
        menuAddress: '',
        menuRemarks: '',
        menuParentName: '',
        icon: ''
      },
      menuFormDetail: { // 查看数据
        id: 0,
        menuName: '',
        menuParentId: '',
        menuAddress: '',
        menuRemarks: '',
        menuParentName: '',
      },
      menuFormEdit: { // 修改数据
        id: 0,
        menuName: '',
        menuParentId: '',
        menuAddress: '',
        menuRemarks: '',
        menuParentName: '',
        icon: ''
      },
      dialogFormVisible: false, // 菜单新增
      parentTheeDialogFormVisible: false, // 树弹窗
      dialogFormVisibleEdit: false, // 数据修改
      dialogFormVisibleDetail: false, // 查看数据
      // 新增修改校验
      rules: {
        // 效验菜单名称
        menuName: [
          { required: true,message: '菜单名称',trigger: 'blur'}
        ],
        // 效验菜单地址
        menuAddress: [
          { required: true,message: '菜单地址不能为空',trigger: 'blur'}
        ]
      }
    }
  },
  mounted () {
    // 初始化菜单信息
    this.getMenuList()
  },
  methods: {
    // 获取菜单数据
    getMenuList () {
      this.$axios
        .get('/menu/getByMenu',)
        .then((res) => {
          this.data = res.data.obj
        })
    },
    // 模糊查询
    queryMenuByMenuName() {
      this.$axios
        .get('/menu/getAllMenuByName', {
          params: {
            menuName: this.menuName
          }
        })
        .then((res) => {
          this.data = res.data.obj
        })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 树节点回调
    callTree (data) {
      console.log(data.menuName)
      this.menuForm.menuParentId = data.id
      this.menuForm.menuParentName = data.menuName
      this.menuFormEdit.menuParentId = data.id
      this.menuFormEdit.menuParentName = data.menuName
      this.parentTheeDialogFormVisible = false
    },
    // 新增弹窗
    addMenu() {
      // 新增窗口打开
      this.dialogFormVisible = true
    },
    // 新增菜单
    saveMenu(menuForm) {
      var formdata = new FormData()
      formdata.set('menuName', this.menuForm.menuName)
      formdata.set('menuParentId', this.menuForm.menuParentId)
      formdata.set('menuParentName', this.menuForm.menuParentName)
      formdata.set('menuAddress', this.menuForm.menuAddress)
      formdata.set('menuRemarks', this.menuForm.menuRemarks)
      formdata.set('icon', this.menuForm.icon)
      this.$refs[menuForm].validate((valid) => {
      if (valid) {
        this.$axios.post('/menu/saveMenu', formdata).
        then(res => {
          if(res.data.obj>0){
              this.message("恭喜你，保存数据成功！","success")
              // 关闭新增窗口
              this.dialogFormVisible = false
              this.menuForm = {
                id: 0,
                menuName: '',
                menuParentId: '',
                menuAddress: '',
                menuRemarks: '',
                menuParentName: '',
                icon: ''
              }
              // 初始化菜单信息
              this.getMenuList()
              }else{
                  this.message("对不起，保存失败！","warning")
              }
          }).catch(() => {
              this.$message.error('服务器崩溃了，请稍后再尝试使用！');
          })
        } else {
            return false;
        }
        });
        },
    // 查看商品数据详情
    menuDetail(row) {
      this.dialogFormVisibleDetail = true
      this.menuFormDetail.id = row.id
      this.menuFormDetail.menuName = row.menuName
      this.menuFormDetail.menuAddress = row.menuAddress
      this.menuFormDetail.menuRemarks = row.menuRemarks
      this.menuFormDetail.menuParentId = row.menuParentId
      this.menuFormDetail.menuParentName = row.menuParentName
    },
    // 修改商品
    updateMenu(menuFormEdit) {
      var formdata = new FormData()
      formdata.set('id', this.menuFormEdit.id)
      formdata.set('menuName', this.menuFormEdit.menuName)
      formdata.set('menuAddress', this.menuFormEdit.menuAddress)
      formdata.set('menuRemarks', this.menuFormEdit.menuRemarks)
      formdata.set('menuParentId', this.menuFormEdit.menuParentId)
      formdata.set('menuParentName', this.menuFormEdit.menuParentName)
      formdata.set('icon', this.menuFormEdit.icon)
      this.$refs[menuFormEdit].validate((valid) => {
        if (valid) {
          this.$axios
        .put(
          '/menu/updateMenuById',
          formdata
        )
        .then((res) => {
          if (res.data.obj > 0) {
            this.message('恭喜你，修改数据成功！', 'success')
            // 关闭修改窗口
            this.dialogFormVisibleEdit = false
            // 初始化菜单信息
            this.getMenuList()
          } else {
            this.message('对不起，修改失败！', 'warning')
          }
        })
        } else {
          return false;
        }
      })
    },
    // 编辑商品
    menuEdit(row) {
      this.dialogFormVisibleEdit = true
      this.menuFormEdit.id = row.id
      this.menuFormEdit.menuName = row.menuName
      this.menuFormEdit.menuAddress = row.menuAddress
      this.menuFormEdit.menuRemarks = row.menuRemarks
      this.menuFormEdit.menuParentId = row.menuParentId
      this.menuFormEdit.menuParentName = row.menuParentName
      this.menuFormEdit.icon = row.icon
    },
    // 删除菜单
    menuDelete(row) {
      this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        } // 删除提示框
      )
        .then(() => {
          this.$axios
            .delete('/menu/deleteMenuById?id=' + row)
            .then((res) => {
              if (res.data.obj > 0) {
                this.message('删除成功', 'success')
                // 初始化菜单信息
                this.getMenuList()
              } else {
                this.message('删除失败', 'warning')
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 消息提示框
    message (message, type) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>
<style scoped>
/* 滚动条的宽度 */
.el-table__body-wrapper::-webkit-scrollbar {
width: 6px; 
height: 6px; 
}
/* 滚动条的滑块 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 3px;
}
.div_icon {
  width: 200px;
}
.cardTree {
  position: absolute;
  z-index: 9999;
}

/*设置tree每行的高度*/
.el-tree-node__content {
  height: 40px;
}

.avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-menu-demo {
  margin-left: 795px;
}

.p1:hover {
  border: 10px solid wheat;
}
.box-card {
    height: 100%;
    width: 100%;
}
</style>
